<template>
  <div>
    <h2>图表1</h2>
    <div class="chart" ref="chartDom">

    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
const chartDom = ref()
onMounted(() => {



  let myChart = echarts.init(chartDom.value)

  var option;

  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
      }
    ]
  };

  option && myChart.setOption(option);
})
</script>
<style scoped>
h2 {
  /* 48像素 */
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.25rem;

}

.chart {
  /* 高度360 */
  height: 4.5rem;
  background-color: #fff;
}
</style>